<template>
  <div class="print-qrCode-container">
    <div class="button-operate">
      <el-button
        :type="buttonType"
        class="common-button plain-button"
        @click="handleLogo"
        :class="showLogo ? 'success-button': ''"
      >
        <i class="iconfont com-icon icon-check-empty"></i>
        <span>带logo</span>
      </el-button>
      <el-button type="primary" class="common-button" v-print="'#printQrCode'">
        <i class="iconfont com-icon icon-printer"></i>
        <span>打印二维码</span>
      </el-button>
    </div>
    <div class="url-container">
      <el-table
        :data="tableData"
        height="calc(100vh - 280px)"
        border
        @selection-change="onChange"
        :header-cell-style="{background: variables.tableHeaderBackGroundColor, color: variables.tableHeaderColor}"
      >
        <el-table-column type="selection" align="center" width="55">
        </el-table-column>
        <el-table-column label="文章编号" prop="order"></el-table-column>
        <el-table-column label="文章描述" prop="decs"></el-table-column>
        <el-table-column label="分栏类型" prop="programSort"></el-table-column>
        <el-table-column label="创作类型" prop="produceSort"></el-table-column>
        <el-table-column label="可见范围" prop="visibleRange"></el-table-column>
        <el-table-column label="文章热度" prop="hot" width="100"></el-table-column>
      </el-table>
    </div>
    <div class="qrCode-container">
      <div id="printQrCode">
        <div
          v-for="item in printQrCode"
          class="qrCode-content"
        >
          <vue-qr
            ref="qrCode"
            :text="item.url"
            :logoSrc="showLogo ? item.logo : ''"
            size="400"
          ></vue-qr>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import variables from '@/styles/variables.scss'
import christmas from '@/assets/image/christmas.png'
import cow from '@/assets/image/cow.png'
import fireBalloon from '@/assets/image/fireBalloon.png'
import trophy from '@/assets/image/trophy.png'
import vidicon from '@/assets/image/vidicon.png'

export default {
  name: 'printQrCode',
  components:{
    VueQr,
  },
  data(){
    return{
      tableData: [
        {order:'20230606170618',decs:'vue-cropper裁剪图片-使用方法及注意事项',programSort:'vue.js',produceSort:'原创',visibleRange:'全部可见',hot:'高',logo:christmas,url:'https://blog.csdn.net/MyOxygen/article/details/131064008'},
        {order:'20230613163221',decs:'立即执行函数(function(){})()的理解和详细用法',programSort:'javaScript',produceSort:'原创',visibleRange:'仅我可见',hot:'低',logo:cow,url:'https://blog.csdn.net/MyOxygen/article/details/131187843'},
        {order:'20230615110149',decs:'vue2使用svg图标',programSort:'vue.js',produceSort:'原创',visibleRange:'全部可见',hot:'高',logo:fireBalloon,url:'https://blog.csdn.net/MyOxygen/article/details/131221184'},
        {order:'20230620150702',decs:'draggable拖拽组件的使用及注意事项',programSort:'vue.js',produceSort:'原创',visibleRange:'全部可见',logo:trophy,hot:'一般',url:'https://blog.csdn.net/MyOxygen/article/details/131393061'},
        {order:'20230626110951',decs:'el-table设置背景色透明',programSort:'ElementUI',produceSort:'转载',hot:'一般',visibleRange:'全部可见',logo:vidicon,url:'https://blog.csdn.net/MyOxygen/article/details/131393061'},
        {order:'20230627093909',decs:'vue2 使用vue-qr生成二维码并打印二维码',programSort:'vue.js',produceSort:'原创',hot:'高',visibleRange:'全部可见',logo:christmas,url:'https://blog.csdn.net/MyOxygen/article/details/131309550'},
      ],
      printQrCode:[],
      showLogo: false,
      buttonType: '',
    }
  },
  computed:{
    variables(){
      return variables
    },
  },
  methods:{
    onChange(val){
      this.printQrCode = val
    },
    handleLogo(){
      this.showLogo = !this.showLogo
      this.buttonType = this.showLogo ? 'success' : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.print-qrCode-container{
  height: calc(100vh - 240px);
}
.button-operate{
  text-align: right;
}
.url-container{
  margin-top: 10px;
}
/*最外层透明*/
.url-container /deep/ .el-table,
.url-container /deep/ .el-table__expanded-cell {
  background-color: transparent;
  color: #606266;
}
/* 表格内背景颜色 */
.url-container /deep/ .el-table th,
.url-container /deep/ .el-table tr,
.url-container /deep/ .el-table td {
  background-color: transparent !important;
  //表格字体颜色
  color: #606266;
}
.qrCode-container{
  width: 0;
  height: 0;
  overflow: hidden;
}
.qrCode-content{
  margin-top: 200px;
  margin-left: 160px;
  page-break-after:always
}
</style>

<style lang="scss">
.plain-button.el-button{
  color: $primaryColor !important;
  border-color: $primaryColor !important;
  padding: 5px 16px !important;
}
.success-button.el-button{
  color: white !important;
  border: 1px solid transparent !important;
}
</style>

